<template>
  <div class="comments">
    <h2>{{ info.title }}的讨论</h2>
    <!-- 发表评论 -->
    <div class="comment-text">
      <!--登录后才显示头像，否则没有 -->
      <img v-if="$store.getters.isLogin" :src="$store.state.userInfo.avatar" />
      <p v-else>
        请先登录后，再评论
        <router-link :to="{ name: 'login' }">登录</router-link>
      </p>
      <div class="comment-right" v-if="$store.getters.isLogin">
        <el-input
          type="textarea"
          :rows="5"
          v-model="commentText"
          placeholder="请输入讨论内容"
        >
        </el-input>
        <el-button type="primary" size="medium" class="send" @click="send"
          >提交</el-button
        >
      </div>
    </div>
    <!-- 评论列表 -->
    <div class="comment-list">
      <p v-if="!comments.length">暂无关于此菜谱的讨论！</p>
      <ul v-else>
        <li v-for="item in comments" :key="item.commentId">
          <router-link
            :to="{ name: 'user-space', query: { userId: item.userId } }"
          >
            <img :src="item.userInfo.avatar" alt="" />
            <h5>{{ item.userInfo.name }}</h5>
          </router-link>
          <div class="comment-detail">
            <p>{{ item.commentText }}</p>
            <p class="time">{{ item.createdAt.substr(0, 10) }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getComments, addComment } from "@/apis/menu.js";
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      comments: [],
      commentText: "",
    };
  },
  async mounted() {
    // 从地址栏获取id值
    let menuId = this.$route.query.menuId;
    // let {menuId} = this.$route.query;
    // 通过menuId值获取数据
    const res = await getComments({ menuId: menuId });
    // console.log(res);
    this.comments = res.data.comments;
    // console.log(this.comments);
  },
  methods: {
    async send() {
      if (!this.commentText) {
        this.$alert("请输入评论内容", "提示");
        return;
      }
      if (this.commentText.length < 10) {
        this.$alert("输入评论内容不能小于10个字符", "提示");
        return;
      }
      const menuId = this.$route.query.menuId;
      // 提交数据
      const res = await addComment({
        menuId: menuId,
        commentText: this.commentText,
      });
      // console.log(res)
      this.comments.unshift(res.data.comments);
      // this.commentText = "";
    },
  },
};
</script>

<style lang="stylus" scoped>
.comments {
  background-color: #ffffff;
  margin-top: 50px;
  padding: 20px 30px;

  h2 {
    line-height: 3em;
    border-bottom: 1px solid #999;
  }

  .comment-text {
    padding: 20px 30px;
    border-bottom: 1px solid #999;
    display: flex;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 30px;
    }

    .comment-right {
      flex: 1;

      .send {
        margin-top: 30px;
      }
    }
  }

  .comment-list {
    padding: 20px 30px;
    border-bottom: 1px solid #999;

    ul {
      li {
        display: flex;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin-bottom: 15px;
        padding: 10px 20px;

        a {
          text-align: center;
          margin-right: 30px;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
        }

        .comment-detail {
          p {
            margin-bottom: 20px;
          }

          .time {
            font-size: 12px;
            color: #888;
          }
        }
      }
    }
  }
}
</style>